<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8"> -->
    <title>作品</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
        function jumpLogin() {
            window.location.href = "../html/Login.html"
        }

    </script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgb(243, 243, 243);
    }

    .zan {
        color: red;
        display: inline;
    }

    .zanShu {
        display: inline;
    }

    .navSearch {
        background-color: rgba(252, 252, 252, 0);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .search {
        border: 1px solid rgb(134, 133, 133);
        background-color: rgb(252, 252, 252);

    }

    .tabbable {
        margin-top: 5px;
    }

    .thumbnail {
        border-radius: 0px;

    }


    .workname {
        background-color: #ccffcc;
        color: #a1dcfa;
        text-shadow: 0.5px 0.5px 1px #1999d6;
        text-align: center;
        margin: 0px;
        border-radius: 0px;
        font-weight: 900;
    }

    .nameID {
        text-align: center;
    }

    .touxiang {
        width: 27px;
        height: 27px;
        border: 1px solid #253c7f;
    }

    .prompt {
        text-align: center;
    }

    .images {
        width: 320px;
        height: 240;
        border: 1px solid rgb(179, 177, 177);
        border-radius: 0px;
    }

    .workOne {
        width: 250px;
        height: 300px;
    }

    #HOT {
        margin-top: 7px;
    }

    #NEW {
        margin-top: 7px;
    }

    .daohang {
        background-image: linear-gradient(to right, #ccffcc, #66cccc);
        border-radius: 0px;
    }

    .worksShow {
        color: white;
        text-align: center;
        font: normal 700 35px "Microsoft Yahei";
        text-shadow: 1px 1px 2px rgb(7, 7, 7);
    }

    .caption {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;

    }

    .thumbnail .caption {
        padding: 7px;
    }

    .selectHOT {
        color: rgb(8, 8, 8);
    }

    .selectNEW {
        color: rgb(5, 5, 5);
    }

    .Work:hover {
        box-shadow: 3px 3px 5px rgb(109, 108, 108);
        /* transform: translate(0, -7px); */
    }
    .Work{
        border-radius: 10px;
    }
    .workbtn {
        background-color: #a1dcfa;
        border-radius: 10px;
    }
  
</style>
<link rel="stylesheet" href="../css/nav.css">

<body>
    <ul class="topnav">
        <li><img src="../资源文件/img/Logo1.png" alt=""></li>
        <li><a class="active" href="../index.html">首页</a></li>
        <li><a href="./WorksShow.html">作品展示</a></li>
        <li><a href="./intro.html">系统简介</a></li>
        <li><a href="./Student_information.html">个人中心</a></li>
        <li class="right"><a id="index_Login" href="#" onclick="jumpLogin()">立即登录</a></li>
    </ul>
    <div id="mainBody">
        <div>
            <div class="daohang">
                <p class="worksShow">作品展示</p>
                <nav class=" navbar-inverse  navSearch">
                    <div class="navbar-header ">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">
                            </span><span class="icon-bar"></span><span class="icon-bar"></span><span
                                class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control inputText" placeholder="请输入学号/昵称/作品名" />
                            </div> <input type="button" value="搜索" class="btn btn-default search"></input>
                        </form>
                    </div>
                </nav>
                <!-- <div class="tabbable" id="tabs-625725"> -->
                <ul class="nav nav-tabs">
                    <li>
                        <a href="#NEW" data-toggle="tab" class="selectNEW" onclick="FNEW()">最新</a>
                    </li>
                    <li class="active">
                        <a href="#HOT" data-toggle="tab" class="selectHOT" onclick="FHOT()" >最热</a>
                    </li>
                </ul>
            </div>

            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-12 column">

                        <div class="tab-content">
                            <div class="tab-pane" id="NEW">
                                <div class="row worksNEW">
                                    <p class="prompt"></p>
                                    <!-- <div class="col-md-3">
                                            <div class="thumbnail">
                                                <img alt="300x200" src="WorksShow钢炼.jpg" class="works" />
                                                <div class="caption">
                                                    <p>
                                                        作品名
                                                    </p>
                                                    <div class="zanTime">
                                                        <span>
                                                            <p class="zan">&#10084;</p>
                                                            <p class="zanShu">100</p>
                                                        </span>
                                                        <span>
                                                            time
                                                        </span>
                                                    </div>
                                                    <div class="nameID">
                                                        <span>
                                                            <img alt="14x14" src="WorksShow柯南.jpeg" class="img-circle touxiang" />
                                                            昵称
                                                        </span>
                                                        <span>
                                                            学号
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
        
                                        </div> -->

                                </div>
                            </div>
                            <div class="tab-pane active" id="HOT">
                                <div class="row worksHOT">
                                    <p class="prompt"></p>

                                    <!-- <div class="col-md-3 Work">
                                        <div class="thumbnail workOne" onclick="jump(' + id + ');" id="' + id + '">
                                            <p class="workname">' + title + '</p>
                                            <img alt="300x200" src="' + imasrc + '" class="images" />
                                            <div class="caption">
                                                <span class="zanTime">
                                                    <p class="zan">&#10084;</p>
                                                    <p class="zanShu">' + numzan + '</p>
                                                </span>
                                                <span class="nameID"><span><img alt="14x14" src="' + touxiang + '"
                                                            class="img-circle touxiang" />' + workerName + '</span> </span>
                                            </div>
                                        </div>
                                    </div> -->


                                    <!-- <div class="col-md-3">
                                        <div class="thumbnail">
                                            <p class="workname">
                                                作品名
                                            </p>
                                            <img alt="300x200" src="../资源文件/img/WorksShow钢炼.jpg" class="images" />
                                            <div class="caption">
                                                <div class="zanTime">
                                                    <span>
                                                        <p class="zan">&#10084;</p>
                                                        <p class="zanShu">100000000</p>
                                                    </span>
                                                </div>
                                                <div class="nameID">
                                                    <span>
                                                        <img alt="14x14" src="../资源文件/img/WorksShow柯南.jpeg"
                                                            class="img-circle touxiang" />
                                                        昵称啊啊啊
        
                                                    </span>
        
                                                </div>
                                            </div>
                                        </div>
        
                                    </div> -->

                                </div>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>

        </div>
    </div>


</body>

<script>

    var imasrc;
    var title;
    var numzan;
    var time;
    var touxiang;
    var workerName;
    var studentID;

    var num;
    var id;

    /*  function appear() {
         if (num > 16) {
             for (var i = 0; i < 16; i++) {
                 id++;
                 imasrc = '../img/q567.jpg';
                 title = '作品名';
                 numzan = '100';
                 time = '2020/1/22';
                 touxiang = 'WorksShow柯南.jpeg';
                 workerName = '昵称';
                 studentID = '1903050435';
                 $('.works').append('<div class="col-md-3"><div class="thumbnail workOne"  onclick="jump(' + id + ');" id="' + id + '"><img alt="300x200" src="' + imasrc + '" class="images" /> <div class="caption"><p>' + title + '</p><div class="zanTime"><span><p class="zan">&#10084;</p><p class="zanShu">' + numzan + '</p></span><span>' + time + '</span></div> <div class="nameID"> <span><img alt="14x14" src="' + touxiang + '" class="img-circle touxiang" />' + workerName + '</span><span class="ID"> ' + studentID + '</span></div></div></div> </div>');
             }
 
         }
         else {
             for (var j = 0; j < num; j++) {
                 id++;
                 imasrc = '../img/q567.jpg';
                 title = '作品名';
                 numzan = '100';
                 time = '2020/1/22';
                 touxiang = 'WorksShow柯南.jpeg';
                 workerName = '昵称';
                 studentID = '1903050435';
                 $('.works').append('<div class="col-md-3"><div class="thumbnail workOne"  onclick="jump(' + id + ');" id="' + id + '"><img alt="300x200" src="' + imasrc + '" class="images" /> <div class="caption"><p>' + title + '</p><div class="zanTime"><span><p class="zan">&#10084;</p><p class="zanShu">' + numzan + '</p></span><span>' + time + '</span></div> <div class="nameID"> <span><img alt="14x14" src="' + touxiang + '" class="img-circle touxiang" />' + workerName + '</span><span class="ID"> ' + studentID + '</span></div></div></div> </div>');
             }
         }
 
     }
  */
    function appear01() {

        $('.worksNEW').append('<div class="col-md-3 Work"> <div class="thumbnail workOne" onclick="jump(' + id + ');" id="' + id + '"><p class="workname">' + workerName[0] + workerName[1] + workerName[2] + '.......' + '</p><img alt="300x200" src="' + imasrc + '" class="images" /><div class="caption"> <div class="zanTime"><p class="zan">&#10084;</p><p class="zanShu">' + numzan + '</p></div> <div class="nameID"><span><img alt="12x12" src="' + touxiang + '"class="img-circle touxiang" />' + title + '</span> </div> </div> </div> </div>');

    }
    function appear02() {

        $('.worksHOT').append('<div class="col-md-3 Work"> <div class="thumbnail workOne" onclick="jump(' + id + ');" id="' + id + '"><p class="workname">' + workerName[0] + workerName[1] + workerName[2] + '.......' + '</p><img alt="300x200" src="' + imasrc + '" class="images" /><div class="caption"> <div class="zanTime"><p class="zan">&#10084;</p><p class="zanShu">' + numzan + '</p></div> <div class="nameID"><span><img alt="12x12" src="' + touxiang + '"class="img-circle touxiang" />' + title + '</span> </div> </div> </div> </div>');

    }

    $(function () {

        $.ajax({
            type: "get",
            url: "http://39.97.237.157:8081/api/getallarticlesbyhot",
            success: fill,

        });

        function fill(data) {
            num = data.data.length;
            // num = 10;
            var t = 0;
            function sixteen() {
                if (num > 16) {

                    for (var j = 0; j < 16; j++) {
                        var i = 16 * t + j;
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;

                        // imasrc = '../img/q567.jpg';
                        // title = '作品名';
                        // numzan = '100';
                        // time = '2020/1/22';
                        // touxiang = 'WorksShow柯南.jpeg';
                        // workerName = '昵称';
                        // studentID = '1903050435';

                        appear02();

                    }
                    t++;
                } else {
                    for (var i = 0; i < num; i++) {
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;

                        // imasrc = '../img/q567.jpg';
                        // title = '作品名';
                        // numzan = '100';
                        // time = '2020/1/22';
                        // touxiang = 'WorksShow柯南.jpeg';
                        // workerName = '昵称';
                        // studentID = '1903050435';

                        appear02();


                    }

                }
            }
            sixteen();
            num -= 16;

            //滚动监听
            var winH = $(window).height(); //页面可视区域高度 
            //之前这里没有设置文件头<!doc type>  $(window).height()获取到的是文档的高度
            $(window).scroll(function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top
                var aa = (pageH - winH - scrollT) / winH;
                // && load === true
                if (aa < 0.02) {

                    sixteen();
                    num -= 16;
                }
            });
        }

    })


    function FNEW() {
        $('.Work').remove();

        $.ajax({
            type: "get",
            url: "http://39.97.237.157:8081/api/getallarticlesbyhot",
            success: fill,

        });

        function fill(data) {

            var Select = $('option').val();
            console.log(Select);

            num = data.data.length;
            // num = 35;
            var t = 0;
            function sixteen() {
                if (num > 16) {

                    for (var j = 0; j < 16; j++) {
                        var i = 16 * t + j;
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;


                        appear01();

                    }
                    t++;


                } else {
                    for (var i = 0; i < num; i++) {
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;
                        appear01();


                    }

                }
            }
            sixteen();
            num -= 16;

            //滚动监听
            var winH = $(window).height(); //页面可视区域高度 
            //之前这里没有设置文件头<!doc type>  $(window).height()获取到的是文档的高度
            $(window).scroll(function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top
                var aa = (pageH - winH - scrollT) / winH;
                // && load === true


                if (aa < 0.02) {

                    sixteen();
                    num -= 16;
                }
            });
        }




    }
    function FHOT() {

        $('.Work').remove();

        $.ajax({
            type: "get",
            url: "http://39.97.237.157:8081/api/getallarticlesbyhot",
            success: fill
        });

        function fill(data) {
            console.log(data);
            console.log(data.msg);
            console.log(data.code);
            console.log(data.data.length);

            num = data.data.length;
            var t = 0;
            function sixteen() {
                if (num > 16) {

                    for (var j = 0; j < 16; j++) {
                        var i = 16 * t + j;
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;


                        appear02();

                    }
                    t++;


                } else {
                    for (var i = 0; i < num; i++) {
                        // imasrc = data.data[i].cover;
                        imasrc = data.data[i].cover;
                        title = data.data[i].name;
                        numzan = data.data[i].lNumber;
                        time = '2020/1/22';
                        touxiang = '../资源文件/img/WorksShow柯南.jpeg';
                        workerName = data.data[i].proName;
                        studentID = data.data[i].aStudyNo;
                        id = data.data[i].proId;

                        appear02();

                    }

                }
            }
            sixteen();
            num -= 16;

            //滚动监听
            var winH = $(window).height(); //页面可视区域高度 
            //之前这里没有设置文件头<!doc type>  $(window).height()获取到的是文档的高度
            $(window).scroll(function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top
                var aa = (pageH - winH - scrollT) / winH;
                // && load === true


                if (aa < 0.02) {

                    sixteen();
                    num -= 16;
                }
            });

        }

    }
    //跳转
    function jump(id) {
        window.open("WorksOne.html?id=" + id, "_blank");
    }

    //搜索---有问题
    $("input[type=button]").click(function () {
        var txt = $("input[type=text]").val();
        //val() 方法返回或设置被选元素的值。
        if ($.trim(txt) != "") {//$.trim(txt)删除字符串开始和末尾的空格
            $(".workOne").hide().filter(":contains('" + txt + "')").show();
            //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            //:contains() 选择器选取包含指定字符串的元素。
            if ($(".workOne").is(":visible")) {
                // $(".works").append("抱歉没有找到您搜索的内容");
                // $(".prompt").text("找到啦！").show().delay(1000).fadeOut();
            } else {
                $(".prompt").text("抱歉没有找到您搜索的内容").show().delay(1000).fadeOut();

            }

        }
        else {
            $(".prompt").text("请输入您要搜索的内容").show().delay(1000).fadeOut();
        }
    });





</script>

</html>